<template>
    <div class="page-address">
      <!-- 导航栏部分 -->
      <nav-bar navbar-title="收货地址"></nav-bar>
      <div class="address-content">
        <!-- 收货地址信息部分 -->
        <div class="content-address" v-if="userAddressList.length > 0">
                <div class="address-item" v-for="item,index in userAddressList" :key="index">
                    <div class="item-left">
                        <div class="left-userInfo">
                            <span class="userInfo-userName">{{ item.linkUser }}</span>
                            <span class="userInfo-phone">{{ item.linkPhone }}</span>
                            <span class="userInfo-tip" v-if="item.defaultAddress">默认</span>
                        </div>
                        <div class="left-userAddress">
                            <span class="address">{{ item.linkAddress }}</span>
                        </div>
                    </div>
                    <div class="item-right">
                        <span class="right-tip edit" @click="editAddress_btn(item)">修改</span>
                        <span class="right-tip del" @click="delAddress_btn(item.id)">删除</span>
                    </div>
                </div>
        </div>
        <div class="no-address" v-else>
            <span class="tip">您还没有收货地址信息哦~</span>
        </div>
        
        <!-- 新建地址按钮 -->
        <div class="content-btns">
            <van-button class="btns-item" type="primary" size="small" @click="saveAddress_btn">新建地址</van-button>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
//引入组合式vue
import { ref, onMounted } from "vue";
//@ts-ignore引入导航组件
import NavBar from "@/components/NavBar/NavBar.vue";
//引入vant组件
import { Icon, Button as VanButton, showToast, showConfirmDialog } from "vant";
//引入vue-router路由
import { useRouter } from "vue-router";
const router = useRouter();
//引入请求函数api
import { reqUserAddressList, reqDeleteAddress } from "@/api/user/index";
//@ts-ignore引入userStore
import { useUserStore } from "@/store/userStore.ts";
const userStore = useUserStore();

//用户地址列表信息
let userAddressList = ref([]);

//获取用户的收货地址信息
const getUserAddressList = async (reRequest?:boolean) => {
    //判断内存中是否有用户收货地址信息?有,退出本函数 但是有时候需要重新请求数据 reRequest:是否再次请求数据
    if(userAddressList.value.length > 0 && reRequest === undefined) return;
    //获取用户id参数  用户仓库? 本地存储?
    let userId = userStore.userInfo.id || JSON.parse(localStorage.getItem("userInfo")).id;
    let res = await reqUserAddressList(userId);
    if(res.code === 200) {
        //处理地址数组顺序:默认地址应该排在第一个
        let temp:any = {};
        for(let i = 0; i < res.result.length; i ++){
            if(res.result[i].defaultAddress){
                temp = res.result[0];
                res.result[0] = res.result[i];
                res.result[i] = temp;
                temp = null;
            }
        }
        //赋值
        userAddressList.value = res.result;
        showToast("地址信息获取成功!");
    }
    console.log('获取当前用户地址信息api',res);
}

//修改地址文字按钮事件
function editAddress_btn (address:any) {
    //console.log(address);
    router.push({path:"/saveAddress",query:{id:address.id}});
}
//删除地址文字按钮事件
async function delAddress_btn (addressId:number) {
    showConfirmDialog({title: '提示',message:'确定删除该地址吗?此操作不可逆!'})
    .then(async () => {
        let res = await reqDeleteAddress(addressId);
        if(res.code === 200){
            showToast("删除成功!");
            //重新请求会员地址列表数据
            getUserAddressList(true);
        }
    })
    .catch(() => {
        showToast("取消删除!");
    });
}

//新建地址按钮点击事件
function saveAddress_btn () {
    router.push("/saveAddress");
}

//vue生命周期
onMounted(() => {
    //获取用户的收货地址信息
    getUserAddressList();
})
</script>

<style lang="less" scoped>
.page-address{
    width: 375px;
    .address-content{
        width: 375px;
        height: calc(100vh - 47px);
        position: relative;
        top:47px;
        background: #e4e7e9;
        display: flex;
        flex-direction: column;
        /**收货地址部分 */
        .content-address{
            width: 360px;
            max-height: 530px;
            overflow: auto;
            padding: 15px;
            box-sizing: border-box;
            margin: 15px auto;
            display: flex;
            flex-direction: column;
            background: #fff;
            border-radius: 5px;
            .address-item{
                width: 100%;
                height: 70px;
                margin: 15px 0;
                padding: 20px 0;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .item-left{
                    height: 50px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    .left-userInfo{
                        font-size: 14px;
                        .userInfo-userName{
                            margin-right: 5px;
                        }
                        .userInfo-tip{
                            margin: 0 10px;
                            padding: 3px 6px;
                            font-size: 10px;
                            background: #27ba9b;
                            color: #fff;
                            border-radius: 3px;
                        }
                    }
                    .left-userAddress{
                        width: 250px;
                        font-size: 14px;
                    }
                }
                .item-right{
                    width: 80px;
                    height: 17px;
                    padding: 0 8px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .right-tip{
                        font-size: 12px;
                        position: relative;
                        cursor: pointer;
                    }
                    .edit::after{
                        content: " ";
                        width: 1px;
                        height: 15px;
                        position: absolute;
                        top:-2.5px;
                        left:30px;
                        background: #000;
                    }
                }
            }
        }
        /**收货地址为空 */
        .no-address{
            width: 375px;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        /**退出登录 */
        .content-btns{
            width: 360px;
            margin: 0 7.5px;
            position: fixed;
            bottom: 20px;
            .btns-item{
                width: 360px;
                height: 40px;
            }
        }
    }
}
</style>